import React, {Component} from 'react';
import {Modal, View, TouchableOpacity, Text, StyleSheet} from 'react-native'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import TimeSpan from "../model/TimeSpan";

export const TimeSpans = [
  new TimeSpan('今 天', 'since=daily'),
  new TimeSpan('本 周', 'since=weekly'),
  new TimeSpan('本 月', 'since=monthly'),
];

// 点击顶部导航栏趋势，弹出modal
class TrendingDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false  // 弹框是否隐藏和出现
    }
  }

  render() {
    const {onSelect,onClose} = this.props;
    let {visible} = this.state;
    return (
      <Modal
        transparent={true}
        visible={visible}
        onRequestClose={onClose}
      >
        <TouchableOpacity
          style={styles.container}
          onPress={this.dismiss}
        >
          <MaterialIcons name={'arrow-drop-up'} size={36} style={styles.arrow}/>
          <View style={styles.content}>
            {
              TimeSpans.map((item,i)=>{
                return <TouchableOpacity key={i} onPress={()=>onSelect(item)}>
                  {/* 文字 */}
                  <Text style={[styles.showText, i !== TimeSpans.length-1 ? styles.line : '']}>{item.showText}</Text>
                </TouchableOpacity>
              })
            }
          </View>
        </TouchableOpacity>
      </Modal>
    );
  }

  // 展示
  show = () => {
    this.setState({
      visible: true,
    })
  };

  // 关闭
  dismiss = () => {
    this.setState({
      visible: false,
    })
  };
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(0,0,0,0.6)',
    flex: 1,
    alignItems: 'center',
  },
  arrow: {
    marginTop: 40,
    color: 'white',
    padding: 0,
    margin: -15,
  },
  content:{
    backgroundColor: 'white',
    borderRadius: 3,
    paddingTop: 3,
    paddingBottom: 3,
    marginRight: 3,
  },
  showText:{
    padding: 10,
    paddingLeft: 20,
    paddingRight: 20,
  },
  line:{
    borderBottomWidth:1,
    borderColor: '#aaa'
  }
});

export default TrendingDialog;